<template>
    <div style="margin-top: 10px;">
        <div shadow="never" :class="{ previewPanel: id != null, doPanel: id == null }">
            <h1 class="title" v-if="id">{{ questionnaire.title }}</h1>
            <h1 class="title" v-else>{{ questionnaire.title }}</h1>
            <div style="padding: 0px;display: flex;justify-content: space-between ;">
                <el-alert :title="questionnaire.desc || '请认真作答'" type="warning" show-icon :closable="false" />
            </div>
            <div v-for="(item, index) in questionnaire.questionList" @deleteQuestion="deleteQuestion"
                style="margin: 8px 0px;background-color: #f5f6f7;border-radius: 8px;padding: 10px 8px;">
                <singleChoiceQuestion :index="index" :question="item" @deleteQuestion="deleteQuestion"
                    v-if="item.type == 'singleChoiceQuestion'" :mode="'review'" />
                <multipleChoiceQuestion :index="index" :question="item" @deleteQuestion="deleteQuestion"
                    v-if="item.type == 'multipleChoiceQuestion'" :mode="'review'" />
                <qaQuestion :index="index" :question="item" @deleteQuestion="deleteQuestion"
                    v-if="item.type == 'qaQuestion'" :mode="'review'" />
                <scoreQuestion :index="index" :question="item" @deleteQuestion="deleteQuestion"
                    v-if="item.type == 'scoreQuestion'" :mode="'review'" />
                <div style="background-color: #fff;padding:10px;border-radius: 8px" v-if="item.faceList.length > 0">
                    <div>
                        <h1 class="title" style="font-size: 12px;">回答状态</h1>
                        <el-popover placement="right" :width="400" trigger="hover" title="微表情分析"
                            v-for="face, imgIndex in item.faceList">
                            <template #reference>
                                <el-image :src="imgBaseURL + face.url"
                                    style="width: 100px; height: 100px;padding:1px;border-radius: 8px"
                                    fit="contain" :preview-src-list="item.faceList.map((i) => { return imgBaseURL + i.url })"></el-image>
                            </template>
                            <div>
                                <el-row :gutter="10">
                                    <el-col :span="12" v-for="au in auList">
                                        <div>
                                            <span>{{ au.title }}</span>
                                            <!-- {{item}}  -->
                                            <el-progress striped striped-flow
                                                :percentage="(item?.faceList[imgIndex]?.ana['' + au.key] || 0) * 100"
                                                :show-text="false" />

                                        </div>
                                    </el-col>
                                </el-row>
                                <el-divider></el-divider>
                                <div>
                                    <el-row :gutter="10">
                                        <el-col :span="12" v-for="emo in emoList">
                                            <div>
                                                <span>{{ emo.title }}</span>
                                                <el-progress striped striped-flow
                                                    :percentage="(item?.faceList[imgIndex]?.ana['' + emo.key] || 0) * 100"
                                                    :max="1" :show-text="false" status="warning" />

                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </el-popover>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import qrcode from 'qrcode';
import { VueDraggable } from 'vue-draggable-plus'
import { POST } from '../../util/axios.js'
import multipleChoiceQuestion from '../../components/multipleChoiceQuestion.vue'
import singleChoiceQuestion from '../../components/singleChoiceQuestion.vue'
import qaQuestion from '../../components/qaQuestion.vue'
import scoreQuestion from '../../components/scoreQuestion.vue'
export default {
    props: {
        id: {
            type: Number,
            default: null,
        },
    },
    components: { VueDraggable, multipleChoiceQuestion, singleChoiceQuestion, qaQuestion, scoreQuestion },
    data() {
        return {
            emoList: [
                { "key": "anger", "title": "愤怒" },
                { "key": "disgust", "title": "厌恶" },
                { "key": "fear", "title": "恐惧" },
                { "key": "happiness", "title": "快乐" },
                { "key": "sadness", "title": "悲伤" },
                { "key": "surprise", "title": "惊讶" },
                { "key": "neutral", "title": "中性" }
            ],
            auList: [
                { "key": "AU01", "title": "内侧眉毛提升" },
                { "key": "AU02", "title": "外侧眉毛提升" },
                { "key": "AU04", "title": "眉毛压低" },
                { "key": "AU05", "title": "上眼睑提升" },
                { "key": "AU06", "title": "脸颊提升" },
                { "key": "AU07", "title": "眼睑紧张" },
                { "key": "AU09", "title": "鼻子皱纹" },
                { "key": "AU10", "title": "上唇提升" },
                { "key": "AU10", "title": "上唇提升" },
                { "key": "AU11", "title": "鼻唇沟加深" },
                { "key": "AU12", "title": "嘴角拉" },
                { "key": "AU14", "title": "酒窝形成" },
                { "key": "AU15", "title": "嘴角压低" },
                { "key": "AU17", "title": "下巴提升" },
                { "key": "AU20", "title": "唇拉伸" },
                { "key": "AU23", "title": "唇紧张" },
                { "key": "AU24", "title": "唇压" },
                { "key": "AU25", "title": "唇部分开" },
                { "key": "AU26", "title": "下巴下垂" },
                { "key": "AU28", "title": "唇吮吸" },
                { "key": "AU43", "title": "眼睛闭合" }
            ],
            finishQNVisible: false,
            questionComponentList: [
                { "title": "请输入题目", "type": "singleChoiceQuestion", "typeCN": '单选题', "choices": [{ "title": "选项一", "score": 0 }, { "title": "选项二", "score": 0 },], "answer": [], 'hasStandardAnswer': false, "analysis": "", "userAnswer": [] },
                { "title": "请输入题目", "type": "multipleChoiceQuestion", "typeCN": '多选题', "choices": [{ "title": "选项一", "score": 0 }, { "title": "选项二", "score": 0 },], "answer": [], 'hasStandardAnswer': false, "analysis": "", "userAnswer": [] },
                { "title": "请输入题目", "type": "qaQuestion", "typeCN": '问答题', "choices": [], "answer": [], 'hasStandardAnswer': false, "analysis": "", "userAnswer": [] },
                { "title": "请输入题目", "type": "scoreQuestion", "typeCN": '打分题', "choices": [], "answer": [], 'hasStandardAnswer': false, "analysis": "", "userAnswer": [] },
            ],
            questionnaire: {
                title: "问卷调查",
                type: "心理测评",
                questionList: [],
                faceList: [],
                faceAnaList: []
            },
            qrCodeData: '',
            imgBaseURL: import.meta.env.VITE_DOWNFILE_API_BASE_URL
        }
    },
    methods: {
        deleteQuestion(index) {
            this.questionnaire.questionList.splice(index, 1)
        },
        async doQN() {
            this.finishQNVisible = true
            let rs = await POST('/questionnaire/doQN', 'POST', this.questionnaire, false, null, true)
            console.log("填写问卷结果:::", rs)
        }
    },
    async mounted() {
        const qrCodeData = window.location.href; // 替换为你需要生成二维码的数据
        qrcode.toDataURL(qrCodeData, (err, url) => {
            if (err) {
                console.error(err);
            } else {
                this.qrCodeData = url;
            }
        });
        let id = this.$route.params?.id || this.id || null
        if (id) {
            let rs = await POST('/questionnaire/getQNRecordByID', 'POST', { "id": id }, false, null, false)
            if (rs.code == 200) {
                this.questionnaire = rs.data.record
            }
        }
    }
}
</script>
<style>
.doPanel {
    height: 100%;
    background-color: #fff;
    padding: 20px 20px;
}

.previewPanel {
    height: 100%;
    background-color: #fff;
    padding: 20px 8px;
}

.label {
    color: var(--el-text-color-regular);
    font-size: 14px;
}

::-webkit-scrollbar {
    width: 0px;
}
</style>